<template>
    <div id="mains" class="mains">
        <mt-loadmore :top-method="loadTop"   ref="loadmore" >
            <section class="search">
                <span class="logo"><img src="../../assets/logo.png"></span>
                    <div class="input-box input-amount">
                        <span class="upper"><img src="../../assets/search.png"></span>
                                <input autocomplate="new-password" v-model="searchOrder" id="amount" min="0" placeholder="搜索币种" type="text">
                    </div>
            </section>
            <section class="quote-tabs">
                <span class="upper ">币币行情</span>
            </section>
            <section class="symbol-list">
                <dl>
                    <dd class="first">
                            <dl class="dl">
                                <dt class="upper node-nore dl-text">币种<span></span>
                                </dt>
                                <dd growing-ignore="true"></dd>
                            </dl>
                            <dl class="m">
                                <dt growing-ignore="true " class="node-nore dl-text">最新成交价</dt>
                                <dd growing-ignore="true"></dd>
                            </dl><em  growing-ignore="true" class="r-nore dl-text">涨跌幅</em>
                        </dd>
                    </dl>
                <div v-for="(item, i) in list" v-bind:key="i" class="list" @click="fnameRouter(item)">
                    <dl class="l">
                            <dt class="upper" style="font-size: 28px;">{{item.fShortName}}/<span class="upper-btc"><span style="font-size:26px">{{item.group}}</span></span></dt>
                    </dl>
                    <dl class="m">
                        <dt growing-ignore="true" class="true-grow" style="font-size: 30px;">{{item.lastDealPrize}}</dt>
                        <dd growing-ignore="true" >¥{{(item.lastDealPrize*okerRatePrice).toFixed(2)}}</dd>
                    </dl>
                    <em v-bind:class="item.fupanddown>= 0?'up':'down'" class="r " growing-ignore="true"><span v-if="item.fupanddown>= 0"><span class="market-up">+</span></span><span>{{item.fupanddown}}%</span></em>
                </div>
            </section>
        </mt-loadmore>
    </div>
</template>
<script>
 import '../../components/util/appback';
 import { Indicator } from 'mint-ui';
export default {
    components: {},
  data () {
    return {
        list:'',
        okerRatePrice:'',
        searchOrder:null,
        historyList:'',
        allLoaded:false
    }
  },
  created() {
            Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
        });
  },
  mounted() {
       this.getRate()
       this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
       })
  },
  methods: {
      loadTop(id) {
         this.getRate();
        },
      fnameRouter(item){
            location.hash = this.$router.history.current.path+'?symbol=' +  item.fid;
                this.$router.push({ name: 'chart',query: {symbol: item.fid} });
            },
          getRate() {
            this.$http.post('v2/market/coins').then((res)=>{
                this.list=res.data.dataMap;
              let list=[];
                for(var i in this.list) {
                    for(var j in this.list[i]) {
                list.push(this.list[i][j])
                }
            }
                this.historyList=list;
               this.list=list;
                 Indicator.close();
                   this.allLoaded = false;// 若数据已全部获取完毕
              this.$refs.loadmore.onTopLoaded();
            })
         }
  },
  watch: {
      searchOrder:function(val){
          let  list=this.historyList;
          this.list=list.filter((item)=>{
              return item.fname_sn.toLowerCase().search(val.toLowerCase())>=0;
          })
      }
  },
  beforeDestroy(){
       Indicator.close();
  }
}
</script>

<style scoped>
 .symbol-list {
    margin-top: 2px;
    padding-bottom: 104px;
    padding-top: 0px;
    position: relative;
}
.list{
      background:   #222240
}
.input-box{
    position: relative;
        width: 80%;
}
.search{
    display: flex;
    height: 120px;
    align-items: center;
    color: #E0E0F9;
}
.search .logo{
    width: 10%;
    font-size:40px;
    font-weight:600;
    text-align: right;
    margin-right: 20px;
}
.input-box input {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 72px;
    border: 0px solid rgba(173,173,216,1);
    font-size: 32px;
    font-weight: 400;
    padding-left: 50px;
    padding-right: 20px;
    border-radius: 8px;
    background: rgba(34, 34, 64, 1);
    color: #E0E0F9;
}
.input-box.input-amount span {
    height: 100%;
    line-height: 72px;
    position: absolute;
    left: 20px;
    top: 0;
    font-size: 28px;
    color: #8c9fad;
}
.symbol-list>dl{
       background:   #222240
}
.market-up{
    position: relative;
    top:-2px;
}
 .symbol-list .m {
    -ms-flex: 1;
    flex: 1;
}
.symbol-list dt {
    font-size: 32px;
    line-height: 48px;
}
.r-nore{
    width: 160px;
}
.true-grow{
    color: #03ad8f;
}
.mains .symbol-list .dl-text{
    font-size: 28px;
}
.quote-tabs span.active {
    color: #1882d4;
    border-bottom: 5px solid #1882d4;
}
.symbol-list .r.down {
    background: #d14b64;
    background:linear-gradient(90deg,rgba(243,109,125,1) 0%,rgba(243,61,83,1) 100%);
}
.symbol-list .r {
    border-radius: 3px;
    line-height: 56px;
    font-size: 28px;
    text-align: center;
    width:160px;
height:56px;
border-radius:32px;
color: rgba(255, 255, 255, 1);
}
.symbol-list .r.up {
    background: #03ad8f;
    background:linear-gradient(90deg,rgba(69,232,176,1) 0%,rgba(102,183,168,1) 100%);
}
.symbol-list dd {
    font-size: 24px;
    line-height: 32px;
    color: #8c9fad;
}
 .symbol-list .l {
    width: 270px;
}
.list .upper{
    color: #E0E0F9
}
 .symbol-list>div {
    padding: 1px 30px 1px;
    height: 116px;
    border-bottom: 1px solid #222240;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
 .symbol-list .first {
    padding: 1px 30px 1px;
    height: 80px;
    border-bottom: 1px solid #222240;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.symbol-list .first .dl{
   width: 270px;
}

 .quote-tabs{
    height: 70px;
    line-height: 58px;
    padding-top: 6px;
    border-bottom: 1px solid #222240;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: start;
    align-items: center;
    background: #222240;
    padding-left: 20px;
}
  .quote-tabs span {
    color: #E0E0F9;
    margin-right: 70px;
    font-size: 32px;
    height:44px;
    line-height: 44px;
    border-left: 6px solid #3A97FD;
    padding-left: 20px;
}
::-webkit-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}
</style>